<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<!--
watch监听器完整写法
添加额外的配置项：
    deep:true 监听对象中多个值
-->

<body>
    <div id="app">
        <select v-model="obj.lang">
            <option value="italy">意大利</option>
            <option value="english">英语</option>
            <option value="german">德语</option>
        </select>
        <input type="textarea" v-model="obj.keywords">
        <input type="textarea" disabled>{{fan}}
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                fan: '',
                obj: {
                    keywords: '小黑',
                    lang: 'english'
                },
            },
            // 需求：输入内容，修改语言 都实时翻译
            watch: {
                obj: {
                    // 深度监控，监控对象中所有子属性值的变化
                    deep: true,
                    // immediate 一进页面就触发，用于给默认值
                    immediate: true,
                    handler(n) {
                        console.log("对象被修改了", n.keywords, n.lang)

                        clearTimeout(this.timer)
                        this.timer = setTimeout(async () => {
                            const res = await axios({
                                url: 'https://applet-base-api-t.itheima.net/api/translate',
                                params: n
                            })
                            console.log(res.data.data)
                            this.fan = res.data.data
                        }, 300)
                    }
                }
            }
        })
    </script>

</body>

</html>